<template>
  <div class="dashboard-container">
    <el-card>
      <div class="dashboard-text">
        <el-form :inline="true" :model="churumingxi" class="demo-form-inline">
          <el-form-item label="物料" style="width: 300px;">
            <el-select v-model="churumingxi.billStage" placeholder="请选择">
              <el-option v-for="item in churumingxi.billStage" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click=" sousuo()">查询</el-button>
            <el-button icon="el-icon-refresh-right" @click="">重置</el-button>
            <span class=" el-icon-arrow-down" @click="zhankai" style="color: #1890ff;" v-if="!shuxing">展开</span>
            <span class="el-icon-arrow-up" @click="zhankai" style="color: #1890ff;" v-if="shuxing">收起</span>
          </el-form-item>
        </el-form>

      </div>
      <div class="table">

        <el-table :data="tableData" border style="width: 100%">
          <el-table-column fixed type="index" width="50">
          </el-table-column>
          <el-table-column prop="material_code" sortable label="物料编码" width="150">
          </el-table-column>
          <el-table-column prop="material_name" sortable label="物料名称" width="150">
          </el-table-column>
          <el-table-column prop="material_model" label="规格型号" width="180">
          </el-table-column>
          <el-table-column prop="unit_id_dictText" label="单位" width="150">
          </el-table-column>
          <el-table-column prop="qty" label="数量" width="90">
          </el-table-column>
          <el-table-column prop="cost" label="金额" width="90">
          </el-table-column>
          <el-table-column prop="unit_cost" label="单位金额" width="90">
          </el-table-column>
          <el-table-column prop="" label="" width="424">
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :page-sizes="[10, 20, 30]" :current-page="this.current" :page-size="this.size"
            layout="total, sizes, prev, pager, next, jumper" :total="this.total">
          </el-pagination>
        </div>

      </div>
    </el-card>

  </div>
</template>
<script>
import { Wuliaokucun } from '@/api/kj';
export default {
  data() {
    return {

      value: '',
      value3: '',
      size: 10,
      total: 0,
      current: 1,
      sou: {
        year: '2022',

        pageNo: 1,
        pageSize: 10,
      },
      sousuomingxi: {

        year: '2022',
        month: 1,

        pageNo: 1,
        pageSize: 10,

      },
      churumingxi: {
        column: 'material_code',
        order: 'asc',
        field: 'id,,,material_code,material_name,material_model,unit_id_dictText,qty,cost,unit_cost,undefined',
        // year: '2022',


        // batchNo: '',

        // // // 开始日期
        // beginDate: '2022-01-01',
        // // // 结束日期
        // endDate: '2022-01-31',


        pageNo: 1,
        pageSize: 10
      },
      shuxing: false,


      tableData: []
    }
  },
  mounted() {
    this.getdata()
  },
  methods: {
    // 分页器
    handleSizeChange(val) {
      this.churumingxi.pageSize = val;
      this.churumingxi.pageNo = 1;
      this.getdata()

      // console.log(`每页 ${val} 条`); ``
    },
    handleCurrentChange(val) {
      this.churumingxi.pageNo = val;

      // console.log(`当前页: ${val}`);
      this.getdata()

    },
    onSubmit() {
      console.log('submit!');
    },
    //展开
    zhankai() {
      this.shuxing = !this.shuxing
    },
    formatter(row, column) {
      return row.date;
    },
    // 更新页面
    async getdata() {


      let { result } = await Wuliaokucun(
        this.churumingxi
      )

      console.log(result);
      console.log(this.tableData + 'attatata');
      this.total = result.total
      this.size = result.size
      console.log(result.total, result.size);

      this.current = result.current
      this.tableData = result.records

    },
    // 查询
    // async sousuo() {
    //   if (this.sousuomingxi.month == '') {
    //     let { result } = await Churuyuehuizong(
    //       this.sou
    //     )
    //     console.log(result);
    //     console.log(this.tableData + 'attatata');
    //     this.total = result.total
    //     this.size = result.size
    //     console.log(result.total, result.size);

    //     this.current = result.current
    //     this.tableData = result.records
    //   } else {
    //     let { result } = await Churuyuehuizong(
    //       this.sousuomingxi
    //     )
    //     console.log(result);
    //     console.log(this.tableData + 'attatata');
    //     this.total = result.total
    //     this.size = result.size
    //     console.log(result.total, result.size);

    //     this.current = result.current
    //     this.tableData = result.records
    //   }


    // }


  },
  // 重置
  resetForm() {
    this.churumingxi.batchNo = ''
    // this.churumingxi.batch_no = ''
    this.getdata()
  }

}

</script>


<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 5px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
<style scoped>
.el-date-editor {
  width: 150px;
  height: 30px;
  /* 你可以根据需要调整这个高度 */
  line-height: 10px;
  /* 保持行高与高度一致，以确保文字垂直居中 */
}

.line {
  text-align: center;
}

.el-form-item {
  margin-bottom: 0px;
}
</style>
